<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>告白墙</title>
</head>
<body>
    <style>
        html body{
            width: 100%;
            height: 100%;
        }
        body{
         background-color: rgba(51, 51, 51, 0.4);
         background-image: url(./1.jpg);
         background-repeat: no-repeat;
        }
        *{
            /*去除浏览器默认样式*/
            margin: 0;
            padding: 0;
            box-sizing: border-box;

        }
        .conter{
            margin:  0 200px;
        }
        h3{
            text-align:center ;/*居中*/
            padding: 20px 0;
            font-size: 20px;
        }
        p{
            text-align: center;
            color: rgb(56, 51, 51);
            font-size: 15px;
            padding: 20px 0;
        }
        .row{
            width: 400px;
            height: 50px;
            margin: 0 auto;
            /* 弹性变量*/
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .row span{
           width: 60px;
           font-size: 15px;/*设置字体大小*/
        }
        .row input{
            width: 300px;
            height: 40px;
            line-height: 30px;
            font-size: 20px;
            text-indent: 40px;
            outline: none;/*去掉边框的轮廓线*/
        }
        .row #submit{
            width: 400px;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            margin: 0 auto;/*水平居中*/
            color: #000;
            background-color: orange;
            border: none;/*去掉边框*/
            border-radius: 10px;/* 圆角边框*/
        }
        .row #submit:active{
            background-color: gray;/*提交后的背景颜色*/
        }
    </style>
    <div class="conter">
      <h3>表白墙</h3>
        <p>输入后点击提交，会将信息显示在表格中</p>
    <div class="row">
      <span>谁：</span>
      <input type="text">
    </div>
    <div class="row">
    <span>对谁：</span>
    <input type="text">
    </div>
    <div class="row">
       <span>说什么：</span>
       <input type="text">
    </div>
    <div class="row">
         <button id="submit">提交</button>
    </div>
</div>
<script>
    let submit=document.querySelector('#submit');
    submit.onclick=function(){
        let inputs=document.querySelectorAll('input');
        let one=inputs[0].value;
        let two=inputs[1].value;
        let three=inputs[2].value;
        if(one==''||two==''||three==''){
            return;
        }
        //2.生成一个新的div 内容就是div里面的内容 把这个新的div加到页面中
        let div=document.createElement('div');
        div.innerHTML=one+'对'+two+'说'+three;
        div.className='row';
        let container=document.querySelector('.conter');
        container.appendChild(div)/*挂到DOM树上*/
        //清空输入框
        for(let i=0;i<inputs.length;i++){
            inputs[i].value='';
        }
    }
</script>
</body>
</html>